<template>
  <view class="content">
    <uni-nav-bar
      title="使用记录"
      color="#fff"
      backgroundColor="transparent"
      :border="false"
      :statusBar="true"
      :fixed="true"
      @clickLeft="$c.back()"
    >
      <view class="uni-nav-bar-l-icon" slot="left">
        <view class="uni-nav-bar-l-icon-left icon">
          <image :src="$img('/static/img2/cc20.png')" lazy-load></image>
        </view>
      </view>
    </uni-nav-bar>

    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="getList"
      :down="downOption"
      :up="upOption"
    >
      <view class="use-log">
        <view class="log-item" v-for="(item, i) in listData" :key="i">
          <view class="item-l">
            <view class="title">
              {{ item.title }}
            </view>

            <view v-if="item.goods_title" class="use-place">
              购买 {{ item.goods_title }}
            </view>

            <view class="time">{{ item.use_time }}</view>
          </view>

          <view class="item-r">¥{{ item.use_coupon }}</view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {
        auto: false
      },
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        auto: true,
        page: {
          size: 10 // 每页数据的数量,默认10
        }
      },
      listData: []
    }
  },

  methods: {
    /**
     * @description: 获取列表
     * @param {*} num
     * @param {*} size
     * @return {*}
     */
    getList({ num, size }) {
      this.req({
        url: 'coupon_record',
        data: {
          page: num
        },
        Loading: true,
        success: res => {
          if (res.status == 1) {
            if (num == 1) {
              this.listData = []
            }

            this.listData = this.listData.concat(res.data.list)
            this.mescroll.endByPage(res.data.list.length, res.data.last_page)
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  padding: 0 0 30rpx;

  .use-log {
    padding: 1rpx 30rpx 0;

    .log-item {
      padding: 30rpx 0;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #333;

      .item-l {
        flex: 1;
        padding-right: 30rpx;

        .title {
          font-size: 28rpx;
          color: #fff;
        }

        .use-place {
          padding: 6rpx 0 0;

          font-size: 24rpx;
          color: rgb(228, 13, 136);
        }

        .time {
          padding: 6rpx 0 0;

          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.5);
        }
      }

      .item-r {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #e40d1d;
      }
    }
  }
}
</style>
